<template>
  <div>
    <el-container style="background: #f5f7f9;">
      <el-header style="background: #fff;padding: 12px 12px;height:auto;">
        <div>
          <el-form :inline="true" size="small">
            <el-form-item>
              <el-radio-group v-model="queryData.status" size="medium" @change="batchStatusChange">
                <el-radio-button label="SHIPPING">已出货</el-radio-button>
                <el-radio-button label="PENDING">待处理</el-radio-button>
                <el-radio-button label="PROCESSING">处理中</el-radio-button>
                <el-radio-button label="OUTBOUND">已出库</el-radio-button>
                <!-- <el-radio-button label="DONE">已完成</el-radio-button> -->
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-input v-model="refNumber" type="textarea" :rows="1" style="width: 280px;" placeholder="订单号" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="refNumber2" type="textarea" :rows="1" style="width: 280px;" placeholder="客户订单号" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="queryData.ba1" type="textarea" :rows="1" style="width: 280px;" placeholder="柜号/提单号" />
            </el-form-item>
            <el-form-item v-show=" queryData.status !== 'SHIPPING' ">
              <el-select v-model="queryData.addrCode" filterable clearable style="width:100%">
                <el-option v-for="(item,i) in addrCodeOptions" :key="i" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item v-show=" queryData.status === 'SHIPPING' ">
              <el-select v-model="queryData.shippingAddrCode" filterable clearable style="width:100%">
                <el-option v-for="(item,i) in shippingAddrCodeOptions" :key="i" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="list">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main style="margin-top: 15px; background: #fff;padding: 12px 16px 0 16px;height: 100%;">
        <div v-show="queryData.status === 'PENDING'" style="height: 100%;display: flex;">
          <el-button type="primary" size="small" @click="selectCapacity">生成出货批次</el-button>&nbsp;
        </div>
        <div v-show="queryData.status === 'SHIPPING'">
          <el-table
            :data="shipping_table_body"
            stripe
            border
            tooltip-effect="dark"
            :max-height="tableHeight"
          >
            <el-table-column prop="orderNumber" label="订单号" />
            <el-table-column prop="orgOwnerName" label="客户" />
            <el-table-column label="地址">
              <template slot-scope="scope">
                <div v-if="!scope.row.addr.fbaCode">
                  <p>{{ scope.row.addr.contacter + " " + scope.row.addr.phone }}</p>
                  <p>{{ scope.row.addr.company }}</p>
                  <p>{{ scope.row.addr.address + " " + scope.row.addr.address2 }}</p>
                  <p>{{ scope.row.addr.city + " " + scope.row.addr.state + " " + scope.row.addr.zipCode }}</p>
                </div>
                <span v-else>{{ scope.row.addr.fbaCode }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ba1" label="柜号/提单号" />
            <el-table-column prop="ba26" label="预约入仓时间" />
            <el-table-column prop="totalCarton" label="预报箱数" />
            <el-table-column prop="totalWeight" label="打单重量" />
            <el-table-column prop="totalVolume" label="打单总体积(CBM)" />
            <el-table-column prop="palletCalculated" label="预计板数" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="small" shape="circle" type="text" @click="showArrivedDialog(scope.row)">到货</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :current-page="queryData.currentPage"
            :page-sizes="[50, 100, 200, 300, 400]"
            :page-size="queryData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="shippingPageTotal"
            style="float: right;"
            @size-change="onPageSizeChange"
            @current-change="onPageChange"
          />
        </div>
        <div v-show="queryData.status === 'PENDING'">
          <el-table
            ref="orderTableRef"
            :data="table_body"
            stripe
            border
            tooltip-effect="dark"
            :max-height="tableHeight"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="orderNumber" label="订单号" />
            <el-table-column prop="orgOwnerName" label="客户" />
            <el-table-column label="地址">
              <template slot-scope="scope">
                <div v-if="scope.row.addr">
                  <p>{{ scope.row.addr.contacter + " " + scope.row.addr.phone }}</p>
                  <p>{{ scope.row.addr.company }}</p>
                  <p>{{ scope.row.addr.address + " " + scope.row.addr.address2 }}</p>
                  <p>{{ scope.row.addr.city + " " + scope.row.addr.state + " " + scope.row.addr.zipCode }}</p>
                </div>
                <span v-else>{{ scope.row.addrCode }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ba1" label="柜号/提单号" />
            <el-table-column prop="totalCarton" label="预报箱数" />
            <el-table-column prop="qty" label="实收箱数" />
            <el-table-column prop="totalWeight" label="打单重量" />
            <el-table-column prop="totalVolume" label="打单总体积(CBM)" />
            <el-table-column prop="palletCalculated" label="预计板数" />
            <el-table-column prop="pallet" label="实际板数" />
            <el-table-column prop="createdAt" label="入库时间" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="small" shape="circle" type="text" @click="showPalletDialog(scope.row)">修改实际板数</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :current-page="queryData.currentPage"
            :page-sizes="[50, 100, 200, 300, 400]"
            :page-size="queryData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal"
            style="float: right;"
            @size-change="onPageSizeChange"
            @current-change="onPageChange"
          />
        </div>
        <div v-show="queryData.status === 'PROCESSING' || queryData.status === 'OUTBOUND'">
          <el-table
            :data="processing_table_body"
            stripe
            border
            tooltip-effect="dark"
            :max-height="tableHeight"
          >
            <el-table-column prop="batchNumber" label="批次号" />
            <el-table-column prop="supplierName" label="供应商" />
            <el-table-column prop="addrCode" label="地址" />
            <el-table-column prop="totalOrder" label="总订单">
              <template slot-scope="scope">
                <a style="text-decoration:underline;" @click="showProcessingTotalOrder(scope.row)">{{ scope.row.totalOrder }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="totalCarton" label="总箱数" />
            <el-table-column prop="totalVolume" label="总体积(CBM)" />
            <el-table-column prop="totalWeight" label="总重量(KG)" />
            <el-table-column prop="createdAt" label="创建时间" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div v-if="queryData.status === 'PROCESSING' ">
                  <el-button size="small" shape="circle" type="text" @click="doBatch(scope.row)">出库</el-button>
                  <el-button size="small" shape="circle" type="text" @click="delBatch(scope.row)">删除批次</el-button>
                  <el-button size="small" shape="circle" type="text" @click="appendOrder(scope.row)">添加订单</el-button>
                  <el-button size="small" shape="circle" type="text" @click="downloadBol(scope.row)">下载BOL</el-button>
                </div>
                <div v-else>
                  <el-button size="small" shape="circle" type="text" @click="showUploadDialog(scope.row)">添加属性</el-button>
                  <el-button size="small" shape="circle" type="text" @click="downloadBol(scope.row)">下载BOL</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :current-page="queryData.currentPage"
            :page-sizes="[50, 100, 200, 300, 400]"
            :page-size="queryData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="processingPageTotal"
            style="float: right;"
            @size-change="onPageSizeChange"
            @current-change="onPageChange"
          />
        </div>
      </el-main>
    </el-container>
    <el-dialog :visible.sync="selectCapacityModel" title="选择供应商" width="30%" :close-on-click-modal="false">
      <el-row>
        <el-col :span="24">
          <el-select v-model="doCapacityFormData.supplierId" placeholder="供应商(如无可选项,请先维护供应商)" clearable style="width:100%">
            <el-option v-for="item in supplierOptions" :key="item.id" :value="item.id" :label="item.clientName" />
          </el-select>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 8px" @click="selectCapacityModel = false">取消</el-button>
        <el-button type="primary" @click="capacitySelected">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="openAppendOrderDrawer" title="追加订单" width="60%" :close-on-click-modal="false">
      <el-row>
        <el-col :span="6" style="padding-right:10px">
          <el-input v-model="refNumber" type="textarea" placeholder="订单号" />
        </el-col>
        <el-col :span="4" style="padding-right:10px">
          <el-button type="primary" @click="list">搜索</el-button>
        </el-col>
      </el-row>
      <el-divider />
      <el-table
        ref="appendOrderTable"
        :data="table_body"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderNumber" label="订单号" />
        <el-table-column prop="orgOwnerName" label="客户" />
        <el-table-column prop="totalCarton" label="箱数" />
        <el-table-column prop="totalWeight" label="打单重量" />
        <el-table-column prop="totalVolume" label="打单总体积(CBM)" />
        <el-table-column prop="createdAt" label="入库时间" />
      </el-table>
      <el-pagination
        background
        :current-page="queryData.currentPage"
        :page-sizes="[50, 100, 200, 300, 400]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        style="float: right;"
        @size-change="onPageSizeChange"
        @current-change="onPageChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 8px" @click="openAppendOrderDrawer = false">取消</el-button>
        <el-button type="primary" @click="doAppendOrder">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="openProcessingOrderDrawer" title="订单详情" width="60%" :close-on-click-modal="false">
      <el-table
        ref="appendOrderTable"
        :data="processing_order_table_body"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="orderNumber" label="订单号" />
        <el-table-column prop="orgOwnerName" label="客户" />
        <el-table-column prop="totalCarton" label="箱数" />
        <el-table-column prop="totalWeight" label="打单重量" />
        <el-table-column prop="totalVolume" label="打单总体积(CBM)" />
        <el-table-column v-if="queryData.status === 'PROCESSING'" label="操作">
          <template slot-scope="scope">
            <el-button size="small" shape="circle" type="text" @click="removeOrder(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 8px" @click="openProcessingOrderDrawer = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 上传附件 -->
    <el-dialog :visible.sync="uploadDialogVisible" :close-on-click-modal="false">
      <el-form class="edit-form" label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="送达时间">
              <el-date-picker v-model.lazy="formDataAttrs.BA4" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width:100%;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item>
              <template slot="label">
                <div>
                  ISA
                  <el-button v-if="formDataAttrs.BA1" type="text" @click="download('BA1')">下载</el-button>
                </div>
              </template>
              <el-upload
                :action="uploadUrl"
                name="file"
                :with-credentials="true"
                :limit="1"
                list-type="text"
                :on-remove="handleRemove"
                :on-success="uploadCallback1"
                :file-list="fileList"
                style="display: inline-block;"
              >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <template slot="label">
                <div>
                  POD
                  <el-button v-if="formDataAttrs.BA2" type="text" @click="download('BA2')">下载</el-button>
                </div>
              </template>
              <el-upload
                :action="uploadUrl"
                name="file"
                :with-credentials="true"
                :limit="1"
                list-type="text"
                :on-remove="handleRemove2"
                :on-success="uploadCallback2"
                :file-list="fileList2"
                style="display: inline-block;"
              >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <template slot="label">
                <div>
                  BOL
                  <el-button v-if="formDataAttrs.BA3" type="text" @click="download('BA3')">下载</el-button>
                </div>
              </template>
              <el-upload
                :action="uploadUrl"
                name="file"
                :with-credentials="true"
                :limit="1"
                list-type="text"
                :on-remove="handleRemove3"
                :on-success="uploadCallback3"
                :file-list="fileList3"
                style="display: inline-block;"
              >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="uploadDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="appendAttrs">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="arrivedDialogVisible" :close-on-click-modal="false">
      <el-form class="edit-form" label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="到货箱数">
              <el-input v-model="arrivedForm.totalCarton" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="到货板数">
              <el-input v-model="arrivedForm.totalPallet" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="到货时间">
              <el-date-picker
                v-model.lazy="arrivedForm.at"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="arrivedDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="arrived">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="palletDialogVisible" :close-on-click-modal="false">
      <el-form class="edit-form" label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="到货板数">
              <el-input v-model="arrivedForm.totalPallet" type="number" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="palletDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="arrivedEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import { copyProperty } from '@/utils/tools'
import { mapState } from 'vuex'
import config from '@/settings'
import dateFormat from 'dateformat'
const BASE_URL = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
  data() {
    return {
      uploadUrl: BASE_URL + '/upload',
      openDrawer: false,
      selectCapacityModel: false,
      openSplitOrderDrawer: false,
      openAppendOrderDrawer: false,
      openProcessingOrderDrawer: false,
      openProcessingCartonDrawer: false,
      uploadDialogVisible: false,
      palletDialogVisible: false,
      arrivedDialogVisible: false,
      selectedOrderTotalWeight: 0,
      selectedOrderTotalVolume: 0,
      fileList: [],
      fileList2: [],
      fileList3: [],
      types: [
        {
          value: 'AIR',
          name: '空运'
        },
        {
          value: 'SEA',
          name: '海运'
        }
      ],
      prioritys: [
        {
          value: 'weight',
          name: '重量优先'
        },
        {
          value: 'volume',
          name: '体积优先'
        }
      ],
      calculationMethods: [
        {
          value: 'CONSTANT',
          name: '固定费用'
        },
        {
          value: 'WEIGHT_UNIT_PRICE',
          name: '重量*单价'
        },
        {
          value: 'VOLUME_UNIT_PRICE',
          name: '体积*单价'
        }
      ],
      table_body: [

      ],
      capacity_table_header: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '类型',
          slot: 'type'
        },
        {
          title: '供应商',
          key: 'supplier'
        },
        {
          title: '体积限制(m3)',
          key: 'maxVolume'
        },
        {
          title: '重量限制(KG)',
          key: 'maxWeight'
        }
      ],
      shipping_table_body: [

      ],
      capacity_table_body: [

      ],
      processing_table_body: [

      ],
      split_order_table_header: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '箱号',
          key: 'cartonNumber'
        },
        {
          title: '重量(KG)',
          key: 'weight'
        },
        {
          title: '体积(m3)',
          key: 'volume'
        }
      ],
      split_order_table_body: [],
      processing_order_table_body: [],
      processing_carton_table_header: [
        {
          title: '箱号',
          key: 'cartonNumber'
        },
        {
          title: '体积',
          key: 'cartonVolume'
        },
        {
          title: '重量',
          key: 'cartonWeight'
        }
      ],
      processing_carton_table_body: [],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      doCapacityFormData: {
        orderIds: [],
        supplierId: ''
      },
      queryData: {
        pageSize: 50,
        currentPage: 0,
        status: 'SHIPPING',
        addrCode: '',
        shippingAddrCode: '',
        ba1: ''
      },
      pageTotal: 0,
      processingPageTotal: 0,
      shippingPageTotal: 0,
      pageSizeOpts: [50, 100],
      drawerTitle: '新增',
      refNumber: '',
      refNumber2: '',
      warehouseOptions: [],
      splitOrderFormData: {
        orderId: '',
        cartonNumbers: [],
        warehouseId: []
      },
      supplierOptions: [],
      batchId: '',
      multipleSelection: [],
      formDataDefaultAttrs: {
            BA1: '',
            BA2: '',
            BA3: '',
            BA4: ''
      },
      formDataAttrs: {
            BA1: '',
            BA2: '',
            BA3: '',
            BA4: ''
      },
      addrCodeOptions: [],
      shippingAddrCodeOptions: [],
      arrivedFormDefault: {
        orderNumber: '',
        totalCarton: '',
        totalPallet: '',
        at: ''
      },
      arrivedForm: {
        orderNumber: '',
        totalCarton: '',
        totalPallet: '',
        at: ''
      }
    }
  },
  created() {
    this.loadSupplierOptions()
    this.list()
  },
  mounted() {
    this.loadAddrCodeOptions()
    this.loadShippingAddrCodeOptions()
  },
  methods: {
      showArrivedDialog(row) {
        copyProperty(this.arrivedForm, this.arrivedFormDefault)
        this.arrivedForm.orderNumber = row.orderNumber
        this.arrivedDialogVisible = true
      },
      arrived() {
        if (!this.arrivedForm.at) {
          this.$message({
            type: 'error',
            message: '请填写到货时间'
          })
          return
        }
        request({
          url: 'pda/arrived',
          method: 'post',
          data: this.arrivedForm
        }).then(res => {
          if (res.success) {
            this.list()
            this.arrivedDialogVisible = false
          }
        })
      },
      arrivedEdit() {
        request({
          url: 'pda/arrived-edit',
          method: 'post',
          data: this.arrivedForm
        }).then(res => {
          if (res.success) {
            this.list()
            this.palletDialogVisible = false
          }
        })
      },
      list() {
      if (this.queryData.status === 'SHIPPING') {
        this.shippingList()
        this.loadShippingAddrCodeOptions()
        return
      }
      if (this.queryData.status === 'PROCESSING') {
        this.processingList()
        return
      }
      if (this.queryData.status === 'OUTBOUND') {
        this.outboundList()
        return
      }
      if (this.refNumber) {
        this.queryData.orderIds = this.refNumber.split(/,|\n|，/)
      } else {
        this.queryData.orderIds = []
      }
      if (this.refNumber2) {
        this.queryData.refs = this.refNumber2.split(/,|\n|，/)
      } else {
        this.queryData.refs = []
      }
      request({
        url: 'truck/batch/capacity',
        method: 'post',
        data: this.queryData
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.table_body = res.data.records
            this.pageTotal = res.data.total
          }
        }
      })
    },
    appendOrder(row) {
      this.queryData.status = 'PENDING'
      this.openAppendOrderDrawer = true
      this.batchId = row.id
    },
    doAppendOrder(row) {
      const selected = this.multipleSelection
      if (selected.length === 0) {
          this.$message({
            type: 'error',
            message: '请选择订单'
          })
          return
      }
      const formData = {
        batchId: this.batchId,
        orderIds: []
      }
      selected.forEach(ele => {
        formData.orderIds.push(ele.orderId)
      })
      request({
        url: 'truck/batch/append-order',
        method: 'post',
        data: formData
      }).then(res => {
        if (res.success) {
          this.openAppendOrderDrawer = false
          this.processingList()
          this.list()
        }
      })
    },
    processingList() {
      if (this.refNumber) {
        this.queryData.orderIds = this.refNumber.split(/,|\n|，/)
      } else {
        this.queryData.orderIds = []
      }
      if (this.refNumber2) {
        this.queryData.refs = this.refNumber2.split(/,|\n|，/)
      } else {
        this.queryData.refs = []
      }
      request({
        url: 'truck/batch/processing',
        method: 'post',
        data: this.queryData
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.processing_table_body = res.data.records
            this.processingPageTotal = res.data.total
          }
        }
      })
    },
    shippingList() {
      if (this.refNumber) {
        this.queryData.orderIds = this.refNumber.split(/,|\n|，/)
      } else {
        this.queryData.orderIds = []
      }
      if (this.refNumber2) {
        this.queryData.refs = this.refNumber2.split(/,|\n|，/)
      } else {
        this.queryData.refs = []
      }
      request({
        url: 'truck/batch/shipping',
        method: 'post',
        data: this.queryData
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.shipping_table_body = res.data.records
            this.shippingPageTotal = res.data.total
          }
        }
      })
    },
    outboundList() {
      if (this.refNumber) {
        this.queryData.orderIds = this.refNumber.split(/,|\n|，/)
      } else {
        this.queryData.orderIds = []
      }
      if (this.refNumber2) {
        this.queryData.refs = this.refNumber2.split(/,|\n|，/)
      } else {
        this.queryData.refs = []
      }
      request({
        url: 'truck/batch/freezed',
        method: 'post',
        data: this.queryData
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.processing_table_body = res.data.records
            this.processingPageTotal = res.data.total
          }
        }
      })
    },
    submit() {
      request({
        url: 'truck/batch/capacity-do',
        method: 'post',
        data: this.doCapacityFormData
      }).then(res => {
        if (res.success) {
          this.selectCapacityModel = false
          this.doCapacityFormData.supplierId = ''
          this.multipleSelection = []
          this.list()
        }
      })
    },
    edit(row) {
      this.drawerTitle = '编辑'
      copyProperty(this.formData, row)
      this.openDrawer = true
    },
    loadSupplierOptions() {
      request({
        url: 'supplier/get',
        method: 'get'
      }).then(res => {
        if (res.success) {
          this.supplierOptions = res.data
        }
      })
    },
    loadAddrCodeOptions() {
      request({
        url: '/truck/batch/addr-code-option',
        method: 'get'
      }).then(res => {
        if (res.success) {
          this.addrCodeOptions = res.data
        }
      })
    },
    loadShippingAddrCodeOptions() {
      request({
        url: '/truck/batch/shipping-addr-code-option',
        method: 'get'
      }).then(res => {
        if (res.success) {
          this.shippingAddrCodeOptions = res.data
        }
      })
    },
    batchStatusChange(value) {
      if (value === 'PENDING') {
        this.list()
      } else if (value === 'PROCESSING') {
        this.processingList()
      } else {
        this.outboundList()
      }
      this.queryData.currentPage = 1
    },
    selectCapacity() {
      const selected = this.multipleSelection
      if (selected.length === 0) {
          this.$message({
            type: 'error',
            message: '请选择订单'
          })
          return
      }
      const doCapacityFormData = []
      selected.forEach(ele => {
        doCapacityFormData.push(ele.orderId)
      })
      this.doCapacityFormData.orderIds = doCapacityFormData
      this.selectCapacityModel = true
    },
    capacitySelected() {
      if (!this.doCapacityFormData.supplierId) {
          this.$message({
            type: 'error',
            message: '请选择供应商'
          })
          return false
      }
      this.submit()
    },
    loadCapacity() {
      request({
        url: 'capacity/query?pageNum=0&pageSize=100',
        method: 'get'
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.capacity_table_body = res.data.records
          }
        }
      })
    },
    doBatch(row) {
      const _this = this
      this.$confirm('批次出库后,批次即被锁定,不能做任何操作了?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request({
            url: 'truck/batch/batch-confirm?batchId=' + row.id,
            method: 'get'
          }).then(res => {
            if (res.success) {
              _this.processingList()
            }
          })
        })
    },
    delBatch(row) {
      const _this = this
      this.$confirm('确认要删除批次?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request({
            url: 'truck/batch/batch-del?batchId=' + row.id,
            method: 'get'
          }).then(res => {
            if (res.success) {
              _this.processingList()
            }
          })
        })
    },
    loadOrderCartons(orderId) {
      request({
            url: 'batch/load-order-cartons?orderId=' + orderId,
            method: 'get'
          }).then(res => {
            if (res.success) {
              this.split_order_table_body = res.data
            }
          })
    },
    splitOrder(row) {
      this.split_order_table_body = []
      this.loadOrderCartons(row.orderId)
      this.splitOrderFormData.orderId = row.orderId
      this.openSplitOrderDrawer = true
    },
    doSplitOrder() {
      const selecteds = this.$refs.splitOrderTable.getSelection()
      if (selecteds.length === 0) {
        this.$Notice.warning({
            title: '请先选择要拆分的箱'
          })
      }
      this.splitOrderFormData.cartonNumbers = []
      selecteds.forEach(ele => {
        this.splitOrderFormData.cartonNumbers.push(ele.cartonNumber)
      })
      this.splitOrderFormData.warehouseId = this.queryData.warehouseId
      request({
        url: 'batch/split-order',
        method: 'post',
        data: this.splitOrderFormData
      }).then(res => {
        if (res.success) {
          this.openSplitOrderDrawer = false
          this.list()
        }
      })
    },
    undoSplit(row) {
      const _this = this
      this.$Modal.confirm({
        title: '确认要取消拆分吗',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          request({
            url: 'batch/undo-split-order?orderId=' + row.orderId,
            method: 'get'
          }).then(res => {
            if (res.success) {
              _this.list()
            }
          })
        }
      })
    },
    showProcessingTotalOrder(row) {
      const urlPrefix = this.queryData.status === 'PROCESSING' ? 'truck/batch/processing-orders' : 'truck/batch/freezed-orders'
      request({
        url: urlPrefix + '?batchId=' + row.id,
        method: 'get'
      }).then(res => {
        if (res.success) {
          this.processing_order_table_body = res.data
          this.openProcessingOrderDrawer = true
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    downloadPod(row) {
      window.open(BASE_URL + '/batch/processing/pod?batchId=' + row.id)
    },
    downloadBase(row) {
      window.open(BASE_URL + '/batch/processing/base?batchId=' + row.id)
    },
    downloadReceipt(row) {
      window.open(BASE_URL + '/d/processing/receipt?batchId=' + row.id)
    },
    download(attr) {
      request({
        url: 'download?ossKey=' + this.formDataAttrs[attr],
        method: 'get'
      }).then(res => {
        if (res.success) {
          window.open(res.data)
        }
      })
    },
    removeOrder(row) {
      this.$confirm('确认要移除订单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request({
            url: 'truck/batch/remove-order?putinId=' + row.id,
            method: 'get'
          }).then(res => {
            if (res.success) {
              this.openProcessingOrderDrawer = false
              this.list()
            }
          })
        })
    },
    appendAttrs() {
      const formDataTemp = {
        batchId: this.batchId,
        attrs: []
      }
      for (const key in this.formDataAttrs) {
        formDataTemp.attrs.push({ 'key': key, value: this.formDataAttrs[key] instanceof Date ? dateFormat(this.formDataAttrs[key], 'yyyy-mm-dd') : this.formDataAttrs[key] })
      }

      request({
        url: 'truck/batch/append-attrs',
        method: 'post',
        data: formDataTemp
      }).then(res => {
        if (res.success) {
          this.uploadDialogVisible = false
          this.list()
          copyProperty(this.formDataAttrs, this.formDataDefaultAttrs)
          this.fileList = []
          this.fileList2 = []
          this.fileList3 = []
        }
      })
    },
    getAttrs(batchId) {
      request({
        url: 'truck/batch/get-attrs?batchId=' + batchId,
        method: 'get'
      }).then(res => {
        if (res.success) {
           copyProperty(this.formDataAttrs, res.data)
        }
      })
    },
    showUploadDialog(row) {
      this.uploadDialogVisible = true
      this.batchId = row.id
      this.getAttrs(row.id)
    },
    showPalletDialog(row) {
      copyProperty(this.arrivedForm, this.arrivedFormDefault)
      this.palletDialogVisible = true
      this.arrivedForm.orderNumber = row.orderId
    },
    downloadBol(row) {
      window.open(BASE_URL + '/truck/batch/bol?batchId=' + row.id)
    },
    handleRemove(file, fileList) {
      this.fileList = []
    },
    handleRemove2(file, fileList) {
      this.fileList2 = []
    },
    handleRemove3(file, fileList) {
      this.fileList3 = []
    },
    uploadCallback1(res) {
        this.formDataAttrs.BA1 = res.ossKey
    },
    uploadCallback2(res) {
        this.formDataAttrs.BA2 = res.ossKey
    },
    uploadCallback3(res) {
        this.formDataAttrs.BA3 = res.ossKey
    },
    openDefDrawer() {
      this.openChargeDefDrawer = true
    },
    closeDefDrawer() {
      this.openChargeDefDrawer = false
    },
    onPageSizeChange(pageSize) {
      this.queryData.pageSize = pageSize
      this.list()
    },
    onPageChange(page) {
      this.queryData.currentPage = page
      this.list()
    }
  },
  computed: {
    tableHeight() {
      return document.documentElement.clientHeight - 280
    },
    pageSize() {
      return this.pageSizeOpts[0]
    },
    ...mapState(//
      {
        // customerOptions: state => state.base.customerOptions,
        channelOptions: state => state.base.channelOptions
      }
    )
  }
}
</script>
<style>
    .demo-el-dialog-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }

    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
